<div class="page-width">
  <div class="grid">

    <div class="grid__item medium-up--one-half medium-up--push-one-quarter">
      <div class="form-message form-message--success hide" id="ResetSuccess" tabindex="-1">
        {{ 'customer.recover_password.success' | t }}
      </div>

      <div id="CustomerLoginForm" class="form-vertical">

        <h1 id="LoginHeading" class="text-center">{{ 'customer.login.title' | t }}</h1>

        {% form 'customer_login', novalidate: 'novalidate' %}

          {%- if form.errors -%}
            <div class="form-message form-message--error">
              <h2 class="h3 form-message__title " tabindex="-1" data-form-status>{{ 'contact.form.error_heading' | t }}</h2>
              {{ form.errors | default_errors }}
            </div>
          {%- endif -%}

          <label for="CustomerEmail">{{ 'customer.login.email' | t }}</label>
          <input
            type="email"
            name="customer[email]"
            id="CustomerEmail"
            autocomplete="email"
            autocorrect="off"
            autocapitalize="off"
            {%- if form.errors contains 'form' -%}
              class="input--error"
              aria-invalid="true"
            {%- endif -%}
            >

          {% if form.password_needed %}
            <label for="CustomerPassword">{{ 'customer.login.password' | t }}</label>
            <input
              type="password"
              value=""
              name="customer[password]"
              id="CustomerPassword"
              {%- if form.errors contains 'form' -%}
                class="input--error"
                aria-invalid="true"
              {%- endif -%}
            >
          {% endif %}

          <div class="text-center">
            {% if form.password_needed %}
              <p><a href="#recover" id="RecoverPassword">{{ 'customer.login.forgot_password' | t }}</a></p>
            {% endif %}

            <input type="submit" class="btn" value="{{ 'customer.login.sign_in' | t }}">

            <p>
              {{ 'layout.customer.create_account' | t | customer_register_link }}
            </p>
          </div>

        {% endform %}
      </div>

      <div id="RecoverPasswordForm" class="hide">

        <div class="text-center">
          <h2 id="RecoverHeading">{{ 'customer.recover_password.title' | t }}</h2>
          <p>{{ 'customer.recover_password.subtext' | t }}</p>
        </div>

        <div class="form-vertical">
          {% form 'recover_customer_password' %}

            {% comment %}
              Add a hidden span to indicate the form was submitted succesfully.
            {% endcomment %}
            {% if form.posted_successfully? %}
              <span class="hide reset-password-success"></span>
            {% endif %}

            <label for="RecoverEmail">{{ 'customer.recover_password.email' | t }}</label>
            <input
              type="email"
              value=""
              name="email"
              id="RecoverEmail"
              class="input-full{% if form.errors %} input--error{% endif %}"
              autocorrect="off"
              autocapitalize="off"
              {% if form.errors %}
                aria-invalid="true"
                aria-describedby="RecoverEmail-email-error"
              {%- endif -%}
              >
            {%- if form.errors -%}
              <span id="RecoverEmail-email-error" class="input-error-message">
                <span class="visually-hidden">{{ 'general.accessibility.error' | t }} </span>
                {% include 'icon-error' %}
                <span>{{ form.errors.messages['form'] }}</span>
              </span>
            {%- endif -%}

            <div class="text-center">
              <p>
                <input type="submit" class="btn" value="{{ 'customer.recover_password.submit' | t }}">
              </p>

              <a href="#LoginHeading" id="HideRecoverPasswordLink">{{ 'customer.recover_password.cancel' | t }}</a>
            </div>
          {% endform %}
        </div>

      </div>

      {% comment %}
        If accounts are set as optional, the following will be shown as an option
        during checkout, not on the default /login page.
      {% endcomment %}
      {% if shop.checkout.guest_login %}
        <div class="text-center">
          <hr class="hr--invisible">
          <h2>{{ 'customer.login.guest_title' | t }}</h2>

          {% form 'guest_login' %}
            <input type="submit" class="btn" value="{{ 'customer.login.guest_continue' | t }}">
          {% endform %}
        </div>
      {% endif %}
    </div>

  </div>
</div>
